function bindSideBarDrag(elementId, sideWidth) {
  const dragPointer = document.getElementById(elementId);

  // 鼠标按下给document添加事件
  dragPointer.addEventListener('mousedown', (e) => {
    e.preventDefault();
    document.addEventListener('mousemove', mousemove);
    document.addEventListener('mouseup', mouseup);
  });

  // 鼠标弹起时移出事件
  function mouseup() {
    document.removeEventListener('mousemove', mousemove);
    document.removeEventListener('mouseup', mouseup);
    localStorage.sideWidth = sideWidth.value;
  }

  /**
   * 鼠标移动时修改宽度（限制最大范围）
   *    10 = 最左侧边距 5 + 拖动条宽度的一半 5，让鼠标始终在拖动条的最中间
   *    左侧右侧都保留最小200宽度
   */
  function mousemove(e) {
    const width = e.clientX - 10;
    if (width > 200 && (window.innerWidth - width) > 200) {
      sideWidth.value = width;
    }
  }
}

export default bindSideBarDrag